@use "everything" as *;

.grid {
  display: grid;
  grid-template-columns: 1fr var(--how-to-use-size, 0px);
}

@include desktop-media {
  .gridEnter {
    transition: grid-template-columns $sheet-enter-duration
      $sheet-enter-timing-function;
  }

  .gridExit {
    transition: grid-template-columns $sheet-leave-duration
      $sheet-leave-timing-function;
  }

  .gridOffset {
    --how-to-use-size: #{window-splitter-get-var(position, 26rem)};
  }
}

.container {
  @include layout-set-var(size, 20rem);

  overflow: hidden;
}

.empty {
  text-align: center;
}

.dark :global(.material-icons-two-tone) {
  color: rgba($black, 0.87);
  filter: contrast(4) invert(1);
}

.system {
  @media (prefers-color-scheme: dark) {
    :global(.material-icons-two-tone) {
      color: rgba($black, 0.87);
      filter: contrast(4) invert(1);
    }
  }
}
